<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Whisky Collection</title>

    <script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" role="main">
    <div class="jumbotron">
        <h1>My Whisky Collection</h1>

        <p>Just an example of simple CRUD application developed using Vert.x and Vertx Web.</p>
    </div>
    <div class="page-header">
        <h1>My Whiskies</h1>
        <button class="pull-right btn btn-primary product-add" data-action="add" data-toggle="modal"
                data-target="#productModal">
            <span class="glyphicon glyphicon-plus"></span> Add a new bottle
        </button>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Origin</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    <!-- filled using Ajax -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        load();
        initModal();
    });

    function create(name, origin) {
        $.post("/api/whiskies", JSON.stringify({name: name, origin: origin}), function () {
            load();
        }, "json");
    }

    function remove(id) {
        $.ajax({
            method: "DELETE",
            url: "/api/whiskies/" + id
        }).done(function () {
            load();
        });
    }

    function update(id, name, origin) {
        $.ajax({
            method: "PUT",
            url: "/api/whiskies/" + id,
            data: JSON.stringify({name: name, origin: origin})
        }).done(function () {
            load();
        });
    }

    function load() {
        $("#content").children().remove();
        $.getJSON("/api/whiskies", function (data) {
            $.each(data, function (key, val) {
                $("<tr><td>" + val.id + "</td><td>" + val.name + "</td><td>" + val.origin + "</td>" +
                        "<td>" +
                        "<button data-action='edit' class='btn btn-primary btn-sm product-edit' " +
                        "data-toggle='modal' " +
                        "data-target='#productModal' " +
                        "data-name='" + val.name + "' " +
                        "data-origin='" + val.origin + "' " +
                        "data-id='" + val.id + "'>" +
                        "<span class='glyphicon glyphicon-pencil'></span>" +
                        "</button>" +
                        "&nbsp;" +
                        "<button class='btn btn-danger btn-sm product-delete' data-id='" + val.id + "'>" +
                        "   <span class='glyphicon glyphicon-minus'></span>" +
                        "</button>" +
                        "</td>" +
                        "</tr>").appendTo("#content");
            });
            initCallbacks();
        });
    }

    function initCallbacks() {
        $(".product-delete").unbind().click(function() {
           var id = $(this).data("id");
           remove(id);
        });
    }

    function initModal() {
        $("#productModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var productAction = $("#productAction");
            productAction.unbind();
            var modal = $(this);
            if (action === "add") {
                modal.find('.modal-title').text("Add a bottle");
                modal.find('#product-name').val("");
                modal.find('#product-origin').val("");
                productAction.click(function () {
                    create($("#product-name").val(), $("#product-origin").val());
                    $('#productModal').modal('toggle');
                });
            } else {
                modal.find('.modal-title').text("Edit a bottle");
                modal.find('#product-name').val(button.data("name"));
                modal.find('#product-origin').val(button.data("origin"));
                productAction.click(function () {
                    update(id, $("#product-name").val(), $("#product-origin").val());
                    $('#productModal').modal('toggle');
                });
            }
        })
    }
</script>
<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="productModalTitle">Add a bottle</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="product-name" class="control-label">Name:</label>
                        <input type="text" class="form-control" id="product-name">
                    </div>
                    <div class="form-group">
                        <label for="product-origin" class="control-label">Origin:</label>
                        <input type="text" class="form-control" id="product-origin">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="productAction" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>